import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, InputNumber, TreeSelect,Select,Radio } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class AssetAttrModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
    });
  };

  onOptionChange = (e) => {
    const { onOptionChange } = this.props;
    onOptionChange(e);
  };


  render() {
    const { children, assetType, item ,title,assetTypeId,assetGroupId,isShowOptions} = this.props;
    const { getFieldDecorator,getFieldProps } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

     const formItemLayout1 = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    

    const loop = data => data.map((item) => {
      if (item.assetType && item.assetType.length) {
        return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_+ ''}>{loop(item.assetType)}</TreeNode>;
      }
      return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''} />;
    });

    return (
        <span>
            <span onClick={this.showModelHandler}>
                { children }
            </span>
            <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                visible={this.props.visible}
                onOk={this.okHandler}
                width={600}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
            >
              <Form layout='horizontal' onSubmit={this.okHandler}>
                 <FormItem style={{marginBottom:0}}>
                  {getFieldDecorator('id',{initialValue:item.id_})(
                    <Input type="hidden"/>
                  )}
                </FormItem>
                 <FormItem style={{marginBottom:0}}>
                  {getFieldDecorator('groupId',{initialValue:this.props.assetGroupId})(
                    <Input type="hidden"/>
                  )}
                </FormItem>
                 <FormItem style={{marginBottom:0}}>
                  {getFieldDecorator('assetTypeId',{initialValue:this.props.assetTypeId})(
                    <Input type="hidden"/>
                  )}
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="名称"
                >
                  {
                    getFieldDecorator('lable', {
                     initialValue: item.lable,
                      rules: [
                        {required: true, whitespace: true, message: '请输入属性名称'},
                        { max: 20, message: '属性名称 20 字符以内' },
                      ]
                    })(<Input />)
                  }
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="字段"
                >
                  {
                    getFieldDecorator('field', {
                     initialValue: item.field,
                      rules: [
                        {required: true, whitespace: true, message: '请输入属性字段名'},
                        { max: 50, message: '属性字段名 50 字符以内' },
                        ]
                    })(<Input />)
                  }
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label="排序"
                  hasFeedback
                >
                  {
                    getFieldDecorator('sort', {
                      initialValue: item.sort,
                      rules: [{
                        type: 'number', message: '排序只能为数字格式',
                      }, {
                        required: true, message: '请输入排序',
                      }],
                    })(<InputNumber min={0} />)
                  }
                </FormItem>


                <FormItem
                  {...formItemLayout}
                  label="类型"
                  hasFeedback
                >
                 {
                    getFieldDecorator('type', {
                      initialValue: item.type?item.type+'':undefined,
                      rules: [{
                        required: true, message: '请选择类型',
                      }]
                    })(
                      <Select
                        placeholder="请选择类型"
                        onChange={this.onOptionChange}
                      >
                        <Option key='1'>文本</Option>
                        <Option key='2'>数值</Option>
                        <Option key='3'>多行文本</Option>
                        <Option key='4'>下拉</Option>
                        <Option key='5'>时间</Option>
                      </Select>
                    )
                  }

                </FormItem>

                 {isShowOptions==4?(<FormItem
                  {...formItemLayout1}
                  hasFeedback
                  label="选项(以英文逗号分割)"
                >
                  {
                    getFieldDecorator('options', {
                     initialValue: item.options,
                      rules: [
                        {required: true, whitespace: true, message: '请输入选项'},
                        { max: 200, message: '选项 200 字符以内' },
                      ]
                    })(<Input  placeholder="请输入选项(以英文逗号分割)" type="textarea" rows={3}/>)
                  }
                </FormItem>):null}

                {isShowOptions!=2?(<FormItem
                  {...formItemLayout}
                  label="长度"
                  hasFeedback
                >
                  {
                    getFieldDecorator('size', {
                      initialValue: item.size,
                      rules: [{
                        type: 'number', message: '长度只能为数字格式',
                      }, {
                        required: true, message: '请输入长度',
                      }],
                    })(<InputNumber min={0} />)
                  }
                </FormItem>):<FormItem
                  {...formItemLayout}
                  label="最大值"
                  hasFeedback
                >
                  {
                    getFieldDecorator('size', {
                      initialValue: item.size,
                      rules: [{
                        type: 'number', message: '最大值只能为数字格式',
                      }, {
                        required: true, message: '请输入最大值',
                      }],
                    })(<InputNumber min={0} />)
                  }
                </FormItem>}

                <FormItem
                  {...formItemLayout}
                  label="是否显示"
                  hasFeedback
                >
                   {
                    getFieldDecorator('isDisplay', {
                      initialValue:  item.isDisplay ? 1 :0,
                    })(
                      <RadioGroup>
                        <Radio value={1}>显示</Radio>
                        <Radio value={0}>不显示</Radio>
                      </RadioGroup>
                    )
                  }
                </FormItem>

                 <FormItem
                  {...formItemLayout}
                  label="是否必填"
                  hasFeedback
                >
                   {
                    getFieldDecorator('isNotNull', {
                      initialValue:  item.isNotNull? 1 : 0,
                    })(
                      <RadioGroup>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                      </RadioGroup>
                    )
                  }
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="属性说明"
                >
                  {
                    getFieldDecorator('intro', {
                     initialValue: item.intro,
                      rules: [
                        { required: true, message: '请输入属性说明',},
                        { max: 200, message: '属性说明 200 字符以内' },
                      ]
                    })(<Input type="textarea" rows={3}/>)
                  }
                </FormItem>


              </Form>
            </Modal>
        </span>
    );
  }
}

export default Form.create()(AssetAttrModal);
